<template>
  <div>
    <ul>
      <!-- <li v-for="item of list" :key="item.id">
        {{ item.name }}
      </li> -->
      <!-- 字符串拼接 -->
      <!-- <router-link :to="'/detail/' + item.name" tag="li" v-for="item of list" :key="item.id">
        {{ item.name }}
      </router-link> -->
      <!-- <router-link :to="{ path: '/detail/' + item.name }" tag="li" v-for="item of list" :key="item.id">
        {{ item.name }}
      </router-link> -->
      <!-- 命名路由传递参数 -->
      <router-link :to="{ name: 'detail', params: { name: item.name } }" tag="li" v-for="item of list" :key="item.id">
        {{ item.name }}
      </router-link>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      list: [
        {
          id: 1,
          name: '张三'
        },
        {
          id: 2,
          name: '李四'
        },
        {
          id: 3,
          name: '王五'
        },
        {
          id: 4,
          name: '亢成🐯'
        }
      ]
    }
  },
  mounted () {
    console.log(this.$router)
    console.log(this.$route)
  }
}
</script>
